<template>
  <view class="order-appeals-page">
    <!-- 申诉列表区域 -->
    <view class="appeals-list-container">
      <z-paging
        ref="paging"
        v-model="appealsList"
        @query="fetchAppealsList"
        :auto="false"
        :refresher-enabled="true"
        :loading-more-enabled="true"
        :empty-view-text="'暂无数据'"
        class="appeals-list"
      >
        <template #top>
          <!-- 导航栏 -->
          <up-navbar title="我处理的订单申诉" :autoBack="true" :fixed="true" bgColor="transparent" :border="false" placeholder/>
          
          <!-- 筛选器区域 -->
          <view class="filter-section">
            <view class="filter-row">
              <view class="filter-item">
                <picker mode="selector" :value="filters.statusIndex" :range="statusOptions" range-key="text" @change="onStatusChange">
                  <view class="picker-text">
                    <text>{{ filters.statusIndex >= 0 ? statusOptions[filters.statusIndex].text : '处理状态' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
              <view class="filter-item">
                <picker mode="selector" :value="filters.areaIndex" :range="areaOptions" range-key="text" @change="onAreaChange">
                  <view class="picker-text">
                    <text>{{ filters.areaIndex >= 0 ? areaOptions[filters.areaIndex].text : '选择区域' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
            </view>
            
            <view class="filter-row">
              <view class="filter-item full-width">
                <picker mode="selector" :value="filters.parkingLotIndex" :range="parkingLotOptions" range-key="text" @change="onParkingLotChange">
                  <view class="picker-text">
                    <text>{{ filters.parkingLotIndex >= 0 ? parkingLotOptions[filters.parkingLotIndex].text : '选择停车场' }}</text>
                    <up-icon name="arrow-down" size="14"></up-icon>
                  </view>
                </picker>
              </view>
            </view>
            <view class="filter-row">
              <view class="filter-item full-width search-item">
                <up-search
                  v-model="filters.plateNumber"
                  :clearabled="true"
                  :showAction="true"
                  placeholder="请输入车牌号"
                  @search="handleSearch"
                  @clear="handleClear"
                >
                  <template #action>
                    <up-button type="primary" size="small" @click="handleSearch">搜索</up-button>
                  </template>
                </up-search>
              </view>
            </view>
          </view>
        </template>
          <view class="appeals-list-content">
            <appeal-item
              v-for="item in appealsList"
              :key="item.id"
              :appeal="item"
              @click="handleAppealClick(item)"
            />
          </view>
        </z-paging>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import AppealItem from './components/AppealItem.vue'

// 筛选条件
const filters = reactive({
  statusIndex: 0,
  areaIndex: 0,
  parkingLotIndex: 0,
  plateNumber: ''
})

// 下拉选项数据
const statusOptions = [
  { value: '', text: '全部状态' },
  { value: 'pending', text: '待处理' },
  { value: 'processing', text: '处理中' },
  { value: 'processed', text: '已处理' },
  { value: 'rejected', text: '已驳回' }
]

const areaOptions = [
  { value: '', text: '全部区域' },
  { value: 'area1', text: '区域一' },
  { value: 'area2', text: '区域二' },
  { value: 'area3', text: '区域三' }
]

const parkingLotOptions = [
  { value: '', text: '全部停车场' },
  { value: 'lot1', text: '停车场一' },
  { value: 'lot2', text: '停车场二' },
  { value: 'lot3', text: '停车场三' }
]

// 列表数据
const appealsList = ref([])
const paging = ref(null)

// 获取申诉列表数据
const fetchAppealsList = async (pageNo, pageSize) => {
  try {
    // 获取筛选条件的值
    const params = {
      status: statusOptions[filters.statusIndex].value,
      area: areaOptions[filters.areaIndex].value,
      parkingLot: parkingLotOptions[filters.parkingLotIndex].value,
      plateNumber: filters.plateNumber,
      pageNo,
      pageSize
    }

    // TODO: 替换为实际的API调用
    const response = await new Promise(resolve => {
      setTimeout(() => {
        resolve({
          data: [
            {
              id: '1',
              orderNumber: 'O2024031501',
              status: 'pending',
              statusText: '待处理',
              plateNumber: '浙A12345',
              area: '区域一',
              parkingLot: '停车场一',
              appealReason: '计费错误',
              appealContent: '停车时间计算有误，实际停车2小时，但系统显示3小时',
              createTime: '2024-03-15 10:30:00'
            },
            {
              id: '2',
              orderNumber: 'O2024031502',
              status: 'processed',
              statusText: '已处理',
              plateNumber: '浙B54321',
              area: '区域二',
              parkingLot: '停车场二',
              appealReason: '重复收费',
              appealContent: '同一笔订单被重复扣费',
              createTime: '2024-03-15 09:15:00',
              processTime: '2024-03-15 11:20:00',
              processResult: '经核实确实存在重复扣费情况，已退还多收取的费用'
            }
          ],
          total: 100
        })
      }, 1000)
    })
    
    paging.value.complete(response.data)
  } catch (error) {
    console.error('获取申诉列表失败:', error)
    uni.showToast({
      title: '获取数据失败',
      icon: 'none'
    })
    paging.value.complete(false)
  }
}

// 处理筛选条件变化
const onStatusChange = (e) => {
  filters.statusIndex = parseInt(e.detail.value)
  paging.value.reload()
}

const onAreaChange = (e) => {
  filters.areaIndex = parseInt(e.detail.value)
  paging.value.reload()
}

const onParkingLotChange = (e) => {
  filters.parkingLotIndex = parseInt(e.detail.value)
  paging.value.reload()
}

// 处理搜索
const handleSearch = () => {
  paging.value.reload()
}

// 处理清空
const handleClear = () => {
  filters.plateNumber = ''
  paging.value.reload()
}

// 处理申诉项点击
const handleAppealClick = (appeal) => {
  uni.navigateTo({
    url: `/pages/order-appeal/detail/index?id=${appeal.id}`
  })
}

// 页面加载时获取数据
onMounted(() => {
  paging.value.reload()
})
</script>

<style lang="scss" scoped>
.order-appeals-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

.filter-section {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin: 20rpx;
  flex-shrink: 0;
}

.filter-row {
  display: flex;
  margin-bottom: 16rpx;
  
  .filter-item {
  flex: 1;
  margin-right: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }
  
  picker {
    width: 100%;
    
    .picker-text {
      height: 70rpx;
      line-height: 70rpx;
      padding: 0 20rpx;
      background-color: #f8f8f8;
      border-radius: 8rpx;
      font-size: 28rpx;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      
      text {
        flex: 1;
      }
    }
  }

  .search-input {
    width: 100%;
    height: 70rpx;
    line-height: 70rpx;
    padding: 0 20rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    font-size: 28rpx;
    color: #333;
  }
}
  
  &:last-child {
    margin-bottom: 0;
  }
}

.filter-item {
  flex: 1;
  margin-right: 20rpx;
  
  &:last-child {
    margin-right: 0;
  }

  &.full-width {
    flex: none;
    width: 100%;
  }
}

.search-item {
  :deep(.uni-easyinput__content) {
    background-color: #f5f5f5;
    border-radius: 8rpx;
  }
}

.appeals-list-container {
  flex: 1;
  position: relative;
}

.appeals-list {
  height: 100%;
}

.appeals-list-content {
  padding: 0 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60rpx 0;
}

.empty-image {
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999999;
}
</style>